<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>模块管理</title>
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />

    <!-- Logo -->
    <link rel="simpleadmin-logo" href="favicon.ico" />

    <!--  Import BootStrap Javascript -->
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/alpinejs.min.js" defer></script>
  </head>
  <body>
    <main>
      <div class="container my-4" x-data="simpleSettings()">
        <nav class="navbar navbar-expand-lg mt-2">
          <div class="container-fluid">
            <a class="navbar-brand" href="/"
              ><span class="mb-0 h4 fw-bold">模块管理</span></a>
            <button
              class="navbar-toggler"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarText"
              aria-controls="navbarText"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarText">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                  <a class="nav-link" href="/">首页</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/network.html">网络</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/scanner.html">扫描</a>
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link active"
                    href="/settings.html"
                    aria-current="page"
                    >设置</a
                  >
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/sms.html">短信</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/console">控制台</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/deviceinfo.html"
                    >设备信息</a
                  >
                </li>
              </ul>
              <span class="navbar-text">
                <button class="btn btn-link text-reset" id="darkModeToggle">
                  暗黑模式
                </button>
              </span>
            </div>
          </div>
        </nav>

        <div class="row mt-5 mb-4">
          <div class="col">
            <div class="card">
              <div class="card-header">AT 终端</div>
              <div class="card-body">
                <div class="card-text">
                  <div class="form-floating mb-4">
                    <!-- At commands output here -->
                    <textarea
                      class="form-control"
                      placeholder="ATI"
                      id="atOutputBox"
                      style="height: 210px"
                      x-text="atCommandResponse"
                      readonly
                    >
                    <label for="floatingTextarea">ATI</label>
                    </textarea>
                  </div>
                  <div>
                    <div class="col-md-4 mb-3">
                      <label for="exampleInputEmail1" class="form-label"
                        >AT 命令</label
                      >
                      <input
                        type="text"
                        class="form-control"
                        id="atCommandInput"
                        placeholder="ATI"
                        aria-describedby="atCommandInput"
                        x-model="atcmd"
                        @keydown.enter="sendATCommand()"
                      />
                      <div id="atCommandInputHelper" class="form-text">
                        用逗号分隔多个命令.
                      </div>
                    </div>
                    <div
                      class="d-grid gap-2 d-md-flex justify-content-md-start"
                    >
                      <button
                        class="btn btn-primary me-md-2"
                        type="button"
                        @click="sendATCommand()"
                        :disabled="isLoading"
                      >
                        提交
                      </button>
                      <button
                        class="btn btn-danger"
                        type="button"
                        @click="clearResponses()"
                        :disabled="isClean"
                      >
                        清除
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="card">
              <div class="card-header">一键工具</div>
              <div class="card-body">
                <div class="card-text table-responsive-sm">
                  <div class="table-responsive">                     
                    <table class="table">              
                      </style>
                      <tbody>
                        <tr>
                          <th scope="row">重启</th>
                          <td>
                            <button
                              type="submit"
                              class="btn btn-danger"
                              @click="showRebootModal()"
                              :disabled="isLoading"
                            >
                              重启
                            </button>
                          </td>
                        <tr>
                        <tr>
                          <th scope="row">重置AT命令设置</th>
                          <td>
                            <button
                              type="submit"
                              class="btn btn-danger"
                              @click="resetATCommands()"
                              :disabled="isLoading"
                            >
                              重置
                            </button>
                          </td>
                        </tr>
                        <tr>
                          <th scope="row">IP 直通</th>
                          <td style="display: flex; justify-content: flex-start;">
                            <select
                              class="form-select"
                              id="ipPassModeSelect"
                              x-model="ipPassMode"
                              style="flex: 1; min-width: 100px;"
                            >
                              <option selected>直通模式</option>
                              <option value="ETH">ETH</option>
                              <option value="USB">USB(ECM/RNDIS)</option>
                            </select>
                          </td>
                          <td>
                            <button
                              type="submit"
                              class="btn btn-primary"
                              @click="ipPassThroughEnable()"
                              x-show="ipPassStatus === false"
                              :disabled="isLoading"
                            >
                              启用
                            </button>
                            <button
                              type="submit"
                              class="btn btn-danger"
                              @click="ipPassThroughDisable()"
                              x-show="ipPassStatus === true"
                              :disabled="isLoading"
                            >
                              禁用
                            </button>
                          </td>
                        </tr>
                        <tr>
                          <th scope="row">USB调制解调器协议</th>
                          <td>
                            <select
                              class="form-select"
                              id="usbNetModeSelect"
                              x-model="usbNetMode"
                            >
                              <option
                                selected
                                x-text="currentUsbNetMode"
                              ></option>
                              <option value="RMNET">RMNET</option>
                              <option value="ECM">ECM (推荐)</option>
                              <option value="MBIM">MBIM</option>
                              <option value="RNDIS">RNDIS</option>
                            </select>
                          </td>
                          <td>
                            <button
                              type="submit"
                              class="btn btn-primary"
                              @click="usbNetModeChanger()"
                              :disabled="isLoading"
                            >
                              更改
                            </button>
                          </td>
                        </tr>
                        <tr>
                          <th scope="row">DNS 代理</th>
                          <td>
                            <button
                              type="submit"
                              class="btn btn-primary"
                              @click="onBoardDNSProxyEnable()"
                              x-show="DNSProxyStatus === false"
                              :disabled="isLoading"
                            >
                              启用
                            </button>
                            <button
                              type="submit"
                              class="btn btn-danger"
                              @click="onBoardDNSProxyDisable()"
                              x-show="DNSProxyStatus === true"
                              :disabled="isLoading"
                            >
                              禁用
                            </button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card mb-3">
              <div class="card-header">TTL和网络扫描设置</div>
              <div class="card-body">
                <style>.table th,.table td {  white-space: nowrap; /* 防止换行 */}</style>
                <label for="TTLState" class="form-label"
                  >TTL状态和数值</label
                >
                <div class="row">
                  <div class="col">
                    <div
                      class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3"
                      x-show="ttlStatus === true"
                    >
                      TTL激活
                    </div>

                    <div
                      class="p-3 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-3"
                      x-show="ttlStatus === false"
                    >
                      TTL不活动
                    </div>
                  </div>
                  <div class="col">
                    <div
                      class="p-3 text-info-emphasis bg-info-subtle border border-info-subtle rounded-3 mb-4"
                      x-text="ttlvalue"
                    ></div>
                  </div>
                </div>
                <div class="card-text mb-3">
                  <div class="mb-4">
                    <input
                      type="text"
                      class="form-control"
                      id="ttlInput"
                      placeholder="TTL Value"
                      x-model="newTTL"
                    />
                    <div id="ttlValueHelper" class="form-text">
                      将TTL值设置为0以禁用。
                    </div>
                  </div>
                  <div class="d-grid gap-1">
                    <button
                      class="btn btn-primary"
                      type="button"
                      @click="setTTL()"
                    >
                      更新
                    </button>
                  </div>
                </div>
                <!-- <div class="card-text">
                  <div class="d-flex flex-row gap-4 w-full">
                    <p><a class="link-info link-opacity-50-hover link-offset-2" href="/scanner.html">Go to Cell Scanner</a></p>
                    <p><a class="link-info link-opacity-50-hover link-offset-2" href="/watchcat.html">Go to WatchCat</a></p>
                  </div>
                </div> -->
              </div>
            </div>
          </div>
        </div>

        <!-- Loading Modal for Reboot -->
        <div class="modal-overlay" x-show="showModal">
          <div class="loading-modal">
            <div
              class="loading-text"
              style="display: flex; flex-direction: column"
            >
              <h3>模块将重启</h3>
              <p style="margin-top: 0.5rem">继续?</p>
            </div>
            <div class="d-grid gap-2 d-md-block">
              <button
                class="btn btn-primary"
                type="button"
                @click="rebootDevice()"
              >
                重启
              </button>
              <button
                class="btn btn-danger"
                type="button"
                @click="closeModal()"
              >
                取消
              </button>
            </div>
          </div>
        </div>

        <!-- Reboot Modal Countdown -->
        <div class="modal-overlay" x-show="isRebooting">
          <div class="loading-modal">
            <div class="loader"></div>
            <div
              class="loading-text"
              style="display: flex; flex-direction: column"
            >
              <h3>重启...</h3>
              <p style="margin-top: 0.5rem">
                请等待
                <span x-text="countdown" style="font-weight: 500"></span>
                seconds.
              </p>
            </div>
          </div>
        </div>
      </div>
    </main>
    <script src="js/dark-mode.js"></script>
    <script>
      function simpleSettings() {
        return {
          isLoading: false,
          showSuccess: false,
          showError: false,
          isClean: true,
          showModal: false,
          isRebooting: false,
          atcmd: "",
          fetchATCommand: "",
          countdown: 0,
          atCommandResponse: "",
          currentSettingsResponse: "",
          ttldata: null,
          ttlvalue: 0,
          ttlStatus: false,
          newTTL: null,
          ipPassMode: "Unspecified",
          ipPassStatus: false,
          usbNetMode: "Unspecified",
          currentUsbNetMode: "未知",
          DNSProxyStatus: true,

          closeModal() {
            this.confirmModal = false;
            this.showModal = false;
          },

          showRebootModal() {
            this.showModal = true;
          },

          sendATCommand() {
            if (!this.atcmd) {
              // Use ATI as default command
              this.atcmd = "ATI";
              console.log(
                "AT Command is empty, using ATI as default command: ",
                this.atcmd
              );
            }
            this.isLoading = true;
            const encodedATCmd = encodeURIComponent(this.atcmd);
            const url = `/cgi-bin/get_atcommand?atcmd=${encodedATCmd}`;

            fetch(url)
              .then((res) => {
                if (!res.ok) {
                  throw new Error(`HTTP error! status: ${res.status}`);
                }
                return res.text();
              })
              .then((data) => {
                this.atCommandResponse = data;
                this.isLoading = false;
                this.isClean = false;
                this.fetchCurrentSettings();
              })
              .catch((error) => {
                console.error("Error: ", error);
                this.showError = true;
                this.isLoading = false;
              });
          },

          sendUserATCommand() {
            this.isLoading = true;
            const encodedATCmd = encodeURIComponent(this.atcmd);
            const url = `/cgi-bin/user_atcommand?atcmd=${encodedATCmd}`;

            fetch(url)
              .then((res) => {
                if (!res.ok) {
                  throw new Error(`HTTP error! status: ${res.status}`);
                }
                return res.text();
              })
              .then((data) => {
                this.atCommandResponse = data;
                this.isLoading = false;
                this.isClean = false;
              })
              .catch((error) => {
                console.error("Error: ", error);
                this.showError = true;
                this.isLoading = false;
              });
          },

          clearResponses() {
            this.atCommandResponse = "";
            this.isClean = true;
          },

          rebootDevice() {
            this.atcmd = "AT+CFUN=1,1";
            this.sendATCommand();

            this.atCommandResponse = "";
            this.showModal = false;
            this.isRebooting = true;
            this.countdown = 40;

            // Do the countdown
            const interval = setInterval(() => {
              this.countdown--;
              if (this.countdown === 0) {
                clearInterval(interval);
                this.isRebooting = false;
                this.init();
              }
            }, 1000);
          },

          resetATCommands() {
            this.atcmd = "AT&F";
            this.sendATCommand();
            console.log("Resetting AT Commands");
            this.atcmd = "";
            this.atCommandResponse = "";
            this.showRebootModal();
          },

          ipPassThroughEnable() {
            if (this.ipPassMode != "Unspecified") {
              if (this.ipPassMode == "ETH") {
                this.atcmd =
                  // at+qmap="mpdn_rule",0,1,1,1,1,"FF:FF:FF:FF:FF:FF"
                  'AT+QMAP="MPDN_RULE",0,1,0,1,1,"FF:FF:FF:FF:FF:FF"';
                this.sendATCommand();
              } else if (this.ipPassMode == "USB") {
                this.atcmd =
                  'AT+QMAP="MPDN_RULE",0,1,0,3,1,"FF:FF:FF:FF:FF:FF"';
                this.sendATCommand();
              } else {
                console.error("Invalid IP Passthrough Mode");
              }
            } else {
              console.error("IP Passthrough Mode not specified");
            }
          },

          ipPassThroughDisable() {
            this.atcmd = 'AT+QMAP="MPDN_RULE",0;+QMAPWAC=1';
            this.sendATCommand();
          },

          onBoardDNSProxyEnable() {
            this.atcmd = 'AT+QMAP="DHCPV4DNS","enable"';
            this.sendATCommand().then(() => {
              this.fetchCurrentSettings();
            });
          },

          onBoardDNSProxyDisable() {
            this.atcmd = 'AT+QMAP="DHCPV4DNS","disable"';
            this.sendATCommand().then(() => {
              this.fetchCurrentSettings();
            });
          },

          usbNetModeChanger() {
            if (this.usbNetMode != "Unspecified") {
              if (this.usbNetMode == "RMNET") {
                this.atcmd = 'AT+QCFG="usbnet",0;';
                this.sendATCommand();
              } else if (this.usbNetMode == "ECM") {
                this.atcmd = 'AT+QCFG="usbnet",1;';
                this.sendATCommand();
              } else if (this.usbNetMode == "MBIM") {
                this.atcmd = 'AT+QCFG="usbnet",2;';
                this.sendATCommand();
              } else if (this.usbNetMode == "RNDIS") {
                this.atcmd = 'AT+QCFG="usbnet",3;';
                this.sendATCommand();
              } else {
                console.log("USB Net Mode Invalid");
              }
            } else {
              console.error("USB Net Mode not specified");
            }
            this.rebootDevice();
          },

          fetchCurrentSettings() {
            this.fetchATCommand =
              'AT+QMAP="MPDN_RULE";+QMAP="DHCPV4DNS";+QCFG="usbnet"';
            fetch(
              "/cgi-bin/get_atcommand?" +
                new URLSearchParams({
                  atcmd: this.fetchATCommand,
                })
            )
              .then((res) => {
                return res.text();
              })
              .then((data) => {
                // Set the value of currentSettingsResponse
                this.currentSettingsResponse = data;
                const currentData = data.split("\n");
                console.log("Lines: ", currentData);

                const testEthpass = currentData[1].match(
                  /\+QMAP: "MPDN_rule",0,0,0,0,0/
                );

                if (testEthpass) {
                  this.ipPassStatus = false;
                } else {
                  this.ipPassStatus = true;
                }

                const testDNSProxy = currentData[6].match(
                  /\+QMAP: "DHCPV4DNS","enable"/
                );

                if (testDNSProxy) {
                  this.DNSProxyStatus = true;
                } else {
                  this.DNSProxyStatus = false;
                }

                const testUSBNet = currentData[8].match(
                  /\+QCFG: "usbnet",(\d)/
                );

                if (testUSBNet[1] == "0") {
                  this.currentUsbNetMode = "RMNET";
                } else if (testUSBNet[1] == "1") {
                  this.currentUsbNetMode = "ECM";
                } else if (testUSBNet[1] == "2") {
                  this.currentUsbNetMode = "MBIM";
                } else if (testUSBNet[1] == "3") {
                  this.currentUsbNetMode = "RNDIS";
                } else {
                  this.currentUsbNetMode = "未知";
                }

                // clear atcmd
                this.atcmd = "";
              })
              .catch((error) => {
                console.error("Error: ", error);
                this.showError = true;
              });
          },

          fetchTTL() {
            fetch("/cgi-bin/get_ttl_status")
              .then((res) => res.json())
              .then((data) => {
                this.ttldata = data;
                this.ttlStatus = this.ttldata.isEnabled;
                this.ttlvalue = this.ttldata.ttl;
              });
          },

          setTTL() {
            this.isLoading = true; // Set loading state while updating TTL
            const ttlval = this.newTTL;
            fetch(
              "/cgi-bin/set_ttl?" + new URLSearchParams({ ttlvalue: ttlval })
            )
              .then((res) => res.text()) // Use res.text() instead of res.json()
              .then((data) => {
                // Manually handle the response data
                console.log("Response from server:", data);
                // You can try to parse the JSON manually or handle the response as needed

                // Once TTL is updated, fetch the updated TTL data
                this.fetchTTL();
                this.isLoading = false; // Set loading state back to false
              })
              .catch((error) => {
                console.error("Error updating TTL: ", error);
                this.isLoading = false; // Ensure loading state is properly handled in case of error
              });
          },
          init() {
            this.fetchCurrentSettings();
            this.fetchTTL();
          },
        };
      }
    </script>
  </body>
</html>
